<template>
  <view class="logistics">
    <!-- 导航栏 -->
    <NavBar title="物流信息" />

    <!-- 订单商品信息 -->
    <view class="order-goods" v-if="orderInfo.goods && orderInfo.goods.length > 0">
      <image :src="orderInfo.goods[0].goods.cover" class="goods-image" />
      <view class="goods-info">
        <view class="goods-name">{{ orderInfo.goods[0].goods.title }}</view>
        <view class="goods-count" v-if="orderInfo.goods.length > 1">
          共{{ orderInfo.goods.length }}件商品
        </view>
      </view>
      <Right size="16" class="right-icon" />
    </view>

    <!-- 物流信息 -->
    <view class="logistics-info" v-if="logistics.company">
      <view class="logistics-header">
        <view class="logistics-company">
          <text class="label">物流公司：</text>
          <text class="value">{{ logistics.company }}</text>
        </view>
        <view class="logistics-no">
          <text class="label">物流单号：</text>
          <text class="value">{{ logistics.logisticsNo }}</text>
          <nut-button size="small" type="primary" @click="copyLogisticsNo">复制</nut-button>
        </view>
      </view>

      <!-- 物流轨迹 -->
      <view class="logistics-timeline">
        <view class="timeline-item" v-for="(item, index) in logistics.traces" :key="index">
          <view class="timeline-dot" :class="{ 'active': index === 0 }"></view>
          <view class="timeline-content">
            <view class="timeline-message">{{ item.content }}</view>
            <view class="timeline-time">{{ item.time }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 暂无物流信息 -->
    <nut-empty v-else description="暂无物流信息" image="empty">
      <template #footer>
        <nut-button type="primary" size="small" @click="goToOrderDetail">返回订单详情</nut-button>
      </template>
    </nut-empty>

    <!-- 底部按钮 -->
    <view class="bottom-action" v-if="logistics.company">
      <nut-button type="primary" block @click="refreshLogistics">刷新物流信息</nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Right } from '@nutui/icons-vue-taro'
import NavBar from '../../components/NavBar/index.vue'
import orderApi from '../../api/order'

// 获取订单ID
const orderId = Taro.getCurrentInstance().router?.params.id

// 订单信息
const orderInfo = ref({
  id: '',
  orderNo: '',
  status: 0,
  goods: []
})

// 物流信息
const logistics = ref({
  company: '',
  logisticsNo: '',
  traces: []
})

// 获取订单信息
const fetchOrderInfo = () => {
  if (!orderId) return
  
  orderApi.getOrderDetail(orderId).then(res => {
    orderInfo.value = res.data
  }).catch(err => {
    Taro.showToast({
      title: err.message || '获取订单信息失败',
      icon: 'none'
    })
  })
}

// 获取物流信息
const fetchLogistics = () => {
  if (!orderId) return
  
  Taro.showLoading({ title: '加载中...' })
  
  orderApi.getOrderLogistics(orderId).then(res => {
    logistics.value = res.data
    Taro.hideLoading()
  }).catch(err => {
    Taro.hideLoading()
    Taro.showToast({
      title: err.message || '获取物流信息失败',
      icon: 'none'
    })
  })
}

// 复制物流单号
const copyLogisticsNo = () => {
  Taro.setClipboardData({
    data: logistics.value.logisticsNo,
    success: () => {
      Taro.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

// 刷新物流信息
const refreshLogistics = () => {
  fetchLogistics()
}

// 返回订单详情
const goToOrderDetail = () => {
  Taro.navigateBack()
}

// 页面加载
onMounted(() => {
  fetchOrderInfo()
  fetchLogistics()
})
</script>

<style lang="scss">
.logistics {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 80px;
}

.order-goods {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 16px;
  margin-bottom: 10px;
  
  .goods-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  .goods-info {
    flex: 1;
    margin: 0 10px;
    
    .goods-name {
      font-size: 14px;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .goods-count {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
  }
  
  .right-icon {
    color: #999;
  }
}

.logistics-info {
  background-color: #fff;
  padding: 16px;
  
  .logistics-header {
    margin-bottom: 20px;
    
    .logistics-company,
    .logistics-no {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 14px;
      
      .label {
        color: #666;
      }
      
      .value {
        color: #333;
        margin-right: 10px;
      }
      
      .nut-button {
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
      }
    }
  }
  
  .logistics-timeline {
    .timeline-item {
      position: relative;
      padding-left: 20px;
      padding-bottom: 15px;
      
      &:last-child {
        padding-bottom: 0;
      }
      
      &:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 10px;
        bottom: 0;
        width: 1px;
        background-color: #ddd;
      }
      
      .timeline-dot {
        position: absolute;
        left: 0;
        top: 6px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ddd;
        
        &.active {
          background-color: #fa2c19;
        }
      }
      
      .timeline-content {
        .timeline-message {
          font-size: 14px;
          line-height: 1.4;
          margin-bottom: 4px;
        }
        
        .timeline-time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
</style>